<template>
  <v-chart
    :options="option"
    :autoresize="true"
    theme="chartsTheme"
  />
</template>
<script>
/*
有两个 y 轴
*/
export default {
  props: {
    textTitleName: {
      type: String,
      default: ''
    },
    legendData: {
      type: Array,
      default: ()=> ['进店人次', '服务人次', '服务率']
    },
    xAxisDataList: {
      type: Array
    },
    yAxisName1: {
      type: String,
      default: ''
    },
    yAxisName2: {
      type: String,
      default: ''
    },
    yAxisData: {
      type: Array
    },
  },
  data() {
    return {
      option: {
        color: ["#19be6b", "#ff9900"],
        title: {
          text: this.textTitleName
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // x: 'left',
          textStyle: {
            fontSize: 16
          },
          data: this.legendData
        },
        toolbox: {
          show: false,
          feature: {
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          top: '30%',
          left: '4%',
          right: '6%'
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisDataList,
        },
        yAxis: [{
          type: "value",
          name: '人次',
          nameTextStyle: {
            fontSize: 14
          },
          axisLabel: {
            fontSize: 16,
            formatter: "{value}"
          }
        },{
          type: "value",
          show: true,
          name: '服务率',
          nameTextStyle: {
            fontSize: 14
          },
          axisLabel: {
            fontSize: 16,
            formatter: "{value} %"
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              width: 1
            }
          }
        }],
        series: [
          {
            name: this.yAxisData[0].name,
            type: "line",
            data: this.yAxisData[0].data,
            label: {
              show: false,
              fontSize: 14
            },
            markPoint: {
              symbolSize: 50,
              label: {
                fontSize: 14
              },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              label: {
                fontSize: 18,
                formatter: (params) => {
                  return Math.round(params.value)
                }
              },
              data: [{ type: "average", name: "平均值" }]
            },
            areaStyle: {}
          },
          {
            name: this.yAxisData[1].name,
            type: "line",
            label: {
              show: false,
              fontSize: 14
            },
            data: this.yAxisData[1].data,
            markPoint: {
              symbolSize: 50,
              label: {
                fontSize: 14
              },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              label: {
                fontSize: 16,
                formatter: (params) => {
                  return Math.round(params.value)
                }
              },
              data: [{ type: "average", name: "平均值" }]
            },
            areaStyle: {}
          },
          {
            name: this.yAxisData[2].name,
            type: "line",
            label: {
              show: false
            },
            markPoint: {
              symbolSize: 50,
              label: {
                fontSize: 14
              },
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            yAxisIndex: 1, // 多个 y 轴时使用
            data: this.yAxisData[2].data
          }
        ]
      }
    }
  },
  watch: {
    xAxisDataList: {
      deep: true,
      handler (value) {
        this.option.xAxis.data = value
      }
    },
    yAxisData: {
      deep: true,
      handler (value) {
        this.option.series[0].data = value[0].data
        this.option.series[1].data = value[1].data
        this.option.series[2].data = value[2].data
      }
    }
  }
}
</script>

<style lang="less">
</style>

